<template>
  <uni-popup ref="UpdateDialogPopup" type="center" :mask-click="false">
    <view class="ReportDialog-container" v-if="msg">
      <image src="../static/guanbi@3x.png" @click="close" v-if="msg.showClose" class="close-icon"></image>

      <view class="f1"></view>
      <view class="title">{{ msg.title || '发现新版本' }}</view>
      <view class="desc">{{ msg.desc || '检测到有新的更新，请升级获取最新题库' }}</view>
      <view class="btn progress" v-if="progress">
        <view style="z-index: 1">{{ progress }}%</view>
        <view class="bg" :style="{width: progress+'%'}"></view>
      </view>
      <view class="btn confirm" v-else @click="toUpdate">立即更新</view>
    </view>
  </uni-popup>
</template>

<script>
import {mapGetters} from 'vuex';
import utils from "@/libs/utils";

export default {
  name: 'UpdateDialog',
  data() {
    return {
      progress: 0,
      msg: null
    }
  },
  mounted() {
    // this.open()
  },
  computed: {
    ...mapGetters(['platform'])
  },
  methods: {
    open(msg) {
      this.msg = msg
      // console.log('updateDialog open', msg)
      this.$refs.UpdateDialogPopup.open()
    },
    close() {
      this.$refs.UpdateDialogPopup.close()
    },

    checkUpdate(gesture) {
      const promise = utils.checkUpdate(gesture)
      // console.log('updateDialog checkUpdate', promise)

      if (promise) {
        promise.then(res => {
          if (res.data.data) {
            this.open(res.data.data)
          } else {
            // this.open({
            // url: 'https://ide.dcloud.net.cn/build/download/5bad8f70-a802-11ee-a478-41731f3f890f'
            // })
            if (gesture) {
              uni.showToast({
                title: '已经是最新版了！', icon: 'none', duration: 2000
              });
            }
          }
        })
      }
    },

    toUpdate() {
      if (store.getters.platform === 'android' && this.msg.url) {
        this.download()
      } else {
        this.toAppStore()
      }
    },

    toAppStore() {
      if (store.getters.platform === 'ios') {
        utils.toAppStore()
        this.close()
      } else {
        utils.toAppStore()
        this.close()
      }
    },
    download() {
      uni.showLoading({
        title: '下载中...',
        mask: true
      })
      this.progress = 0
      uni.downloadFile({
        url: this.msg.url,
        success: (downloadResult) => {
          uni.hideLoading()
          if (downloadResult.statusCode === 200) {
            console.log('downloadResult.tempFilePath', downloadResult.tempFilePath)
            plus.runtime.install(downloadResult.tempFilePath, {
              force: false
            }, function () {
              console.log('install success...');
              plus.runtime.restart();
            }, function (e) {
              console.error('install fail...', e);
            });
          }
        },
        complete: () => {
          this.close()
          uni.hideLoading()
        }
      }).onProgressUpdate((res) => {
        console.log('下载进度' + res.progress);
        this.progress = res.progress
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.ReportDialog-container {
  background-image: url("http://down.qwdata.vip/app_icon/1687087322840");
  width: 630rpx;
  height: 712rpx;
  background-size: contain;
  display: flex;
  flex-direction: column;

  .close-icon {
    width: 24upx;
    height: 24upx;
    position: absolute;
    right: 40upx;
    top: 40upx
  }

  .title {
    font-size: 19px;
    color: #1A1D2E;
    align-self: center;
    font-weight: bold;
  }

  .desc {
    font-size: 15px;
    color: #505050;
    margin-top: 40rpx;
    align-self: center;
    margin-left: 64rpx;
    margin-right: 64rpx;
    margin-bottom: 64rpx;
    text-align: center;
    line-height: 24px;
  }

  .btn {
    height: 94rpx;
    margin: 46rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    font-size: 16px;
    border-radius: 50px;

    &.progress {
      color: #000;
      font-weight: bold;
      font-size: 16px;
      border: 1px solid #2d90fc;
      position: relative;
      overflow: hidden;

      .bg {
        background-color: #2d90fc;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
      }
    }

    &.confirm {
      background-color: #2d90fc;
      color: #fff;
    }
  }
}
</style>
